<template>
  <div id="water-level-chart">
    <div class="water-level-chart-title">循环水运行情况</div>

    <!--<div class="water-level-chart-details">-->
      <!---->
    <!--</div>-->

    <div class="chart-container">
      <div>
        <dv-water-level-pond :config="config1" />
        <span>调节池</span>
      </div>
      <div>
        <dv-water-level-pond :config="config2" />
        <span>冷却池</span>
      </div>
      <div>
        <dv-percent-pond :config="config3" />
        <span>
          进水管压力
        </span>
      </div>
    </div>
    <div class="chart-container">
      <div>
        <dv-water-level-pond :config="config4" />
        <span>反应池</span>
      </div>
      <div>
        <dv-water-level-pond :config="config5" />
        <span>沉淀池</span>
      </div>
      <div>
        <dv-percent-pond :config="config6" />
        <span>出水管压力</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'WaterLevelChart',
  data () {
    return {
      config1: {},
      config2: {},
      config3: {},
      config4: {},
      config5: {},
      config6: {}
    }
  },
  methods: {
    createData(){

      const { randomExtend } = this

      this.config1 = {
        data: [randomExtend(10, 90)],
          shape: 'round',
          waveHeight: 5,
          waveNum: 2
      }
      this.config2 = {
        data: [randomExtend(10, 90)],
          shape: 'round',
          waveHeight: 5,
          waveNum: 2
      }
      this.config3 = {
        value: randomExtend(10, 90),
        localGradient: true
      }
      this.config4 = {
        data: [randomExtend(10, 90)],
          shape: 'roundRect',
          waveHeight: 5,
          waveNum: 2,
          colors: ['#ff8839', '#e3e774']
      }
      this.config5 = {
        data: [randomExtend(10, 90)],
          shape: 'roundRect',
          waveHeight: 5,
          waveNum: 2,
          colors: ['#ff8839', '#e3e774']
      }
      this.config6 = {
        value: randomExtend(10, 90),
        localGradient: true,
        colors: ['#ff8839', '#e3e774']
      }
    },
    randomExtend (minNum, maxNum) {
      if (arguments.length === 1) {
        return parseInt(Math.random() * minNum + 1, 10)
      } else {
        return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10)
      }
    }
  },
  mounted () {
    const { createData } = this

    createData()

    setInterval(createData, 3000)
  }

}
</script>

<style lang="less">
#water-level-chart {
  width: 50%;
  box-sizing: border-box;
  margin-left: 20px;
  background-color: rgba(6, 30, 93, 0.5);
  border-top: 2px solid rgba(1, 153, 209, .5);
  display: flex;
  flex-direction: column;

  .water-level-chart-title {
    font-weight: bold;
    height: 50px;
    display: flex;
    align-items: center;
    font-size: 20px;
    justify-content: center;
  }

  .water-level-chart-details {
    height: 15%;
    display: flex;
    justify-content: center;
    font-size: 17px;
    align-items: flex-end;

    span {
      font-size: 35px;
      font-weight: bold;
      color: #58a1ff;
      margin: 0 5px;
      margin-bottom: -5px;
    }
  }

  .chart-container {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;

    span {
      display: inline-block;
      position: relative;
      top: 10px;
      left: 50px;
    }
  }

  .dv-water-pond-level {
    max-width: 90%;
    width: 100px;
    height: 100px;
    margin-left: 20px;
    margin-right: 20px;
    /*border: 5px solid #19c3eb;*/
    /*border-radius: 50%;*/
    text {
      font-size: 18px;
      font-weight: normal;
    }
  }

  .dv-percent-pond {
    width:200px;
    height:100px;
    margin-left: 20px;

    text{
      font-size: 18px;
      font-weight: normal;
    }
  }
}
</style>
